<template>
   <div class='page-container'>
    <button @click="visible = true">打开弹窗</button>
   </div>
   <teleport to="body">
    <div  v-if="visible" class="modal-overlay">
        <div  :class="`${leave ? 'content leave-motion':'content'}`" @mousemove="handleMouseMove" @mouseenter="(e)=>handleMouseEnter(e,true)" @mouseleave="(e)=>handleMouseEnter(e,false)">
            <div class="emoji-head" :style="`background: linear-gradient(to bottom, hsl(${hue_deg}deg 100% 65.29%),rgb(255, 223, 78));`">
                <div class="eye-white">
                    <div class="eye-white-left">
                        <div class="eye-ball"  :style="`transform:scale(${eye_ball_diameter_scale}) translate(-${eye_ball_move[0]}%,-${eye_ball_move[1]}%);left:${eye_ball_move[0]}%;top:${eye_ball_move[1]}%;`"></div><!-- Create By Shawn Lee , Blibli 助学宝StudyPal -->
                    </div>
                    <div class="eye-white-right"> 
                        <div class="eye-ball"  :style="`transform:scale(${eye_ball_diameter_scale}) translate(-${eye_ball_move[2]}%,-${eye_ball_move[3]}%);left:${eye_ball_move[2]}%;top:${eye_ball_move[3]}%`"></div>
                    </div>
                </div>
                <div class="mouth" :style="`border-radius: ${mouth_radius[0]}px ${mouth_radius[1]}px  ${mouth_radius[2]}px ${mouth_radius[3]}px;`">
                    <div class="teeth"></div>
                    <div class="tongue"></div>
                </div>
                <div class="cheeks" :style="`left:${50 + eye_ball_move[2] / 100}%;top:${52 + eye_ball_move[3] / 100}%;`">
                    <div class="cheek-item" :style="`background: radial-gradient(ellipse at center, rgba(250, 147, 147,${cheek_alpha}) 60%, rgba(202, 40, 40,${cheek_alpha}) 90%);`"></div>
                    <div class="cheek-item" :style="`background: radial-gradient(ellipse at center, rgba(250, 147, 147,${cheek_alpha}) 60%, rgba(202, 40, 40,${cheek_alpha}) 90%);`"></div>
                </div>
            </div>
            <div class="button-wrapper">
                <div class="btn-primary success">保留</div>
                <div class="btn-primary danger">卸载</div>
            </div>
        </div>
    </div>
    </teleport>
 </template>
 <script setup>
 import { onMounted,ref } from 'vue'

 const visible = ref(false);
 const hue_deg = ref(49);
 const cheek_alpha = ref(1);
 const eye_ball_diameter_scale = ref(1);
 const mouth_radius = ref([5,5,50,50]);//上左,上右,下左,下右
 const eye_ball_move = ref([90,80,10,20]);
 const leave = ref(false);
 /**
 * 脸色线性渐变跟随
 * 脸颊,眼球局部区域转动跟随,眼球大小变化,
 * 嘴巴radius 变化
 * 
 */
 
 
 const reset = () => {
    hue_deg.value = 49;
    cheek_alpha.value = 1;
    eye_ball_diameter_scale.value = 1;
    mouth_radius.value = [5,5,50,50];//上左,上右,下左,下右
    eye_ball_move.value = [90,80,10,20];
 }
 
 
 
 const handleMouseEnter = (e,flag) => {
    if (!flag) {
        leave.value = true;
      reset();
    }
 }
 
 const handleMouseMove = (e) => {
    //面部max 140,min 49
    let max = 140,min = 49;
    let width = 600,height=300;
    let face_ratio = (max - min) / width;//面部渐变
    let cheek_ratio = 1 / (width-50);//脸颊渐变
    let eye_ball_diameter_ratio = 1 / width;//眼球直径渐变
     hue_deg.value = min + face_ratio * e.layerX;
     cheek_alpha.value = 1 + (-1 * cheek_ratio * e.layerX) >= 0.1?1+(-1 * cheek_ratio * e.layerX) : 0;
     eye_ball_diameter_scale.value = 1 + (eye_ball_diameter_ratio * e.layerX) / 3;
     eye_ball_move.value = [(e.layerX/width) * 100,(e.layerY/height) * 100,(e.layerX/width) * 100,(e.layerY/height) * 100];
     let MR = (e.layerX/width);
     let MRX = 0,MRY = 0;//左移下圆，右移上圆 ，
     MRX = MR * 50 < 5?5:MR * 50;
     MRY = 50 + (-1 * MR) * 45;
     mouth_radius.value = [MRX,MRX,MRY,MRY];
     
 }  
 
 
 </script>
 
 <style scoped>
 .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
  }
 .page-container{
    display: flex;
    justify-content: center;
 }
 .button-wrapper{
    display: flex;
    justify-content: space-between;
    width: 90%;
 }
 .btn-primary{
    width: 80px;
    height: 40px;
    border-radius: 5px;
    text-align: center;
    line-height: 40px;
    color:white;
    font-size: 18px;
    cursor: pointer;
 }
 .success{
    background: rgb(19, 197, 19);
 }
 .danger{
    background: rgb(230, 38, 31);
 }
 .content{
    width:600px;
    height:400px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    background: white;
    flex-direction: column;
    padding:20px 0;
 }
 .leave-motion{
    transition: all 0.1s;
 }
 
 .content .emoji-head{
    width:200px;
    height:200px;
    border-radius: 50%;
    border:3px solid rgb(230, 215, 6);
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
    transition: linear;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
    position: relative;
    margin-top: 80px;
 }
 .content .mouth{
    width: 90px;
    height: 40px;
    background: rgb(173, 36, 36);
    position:relative;
    border: 2px solid rgb(172, 12, 12);
    overflow: hidden;
 }
 .content .mouth .teeth{
    width: 15px;
    height: 8px;
    border-radius: 0 0 5px 5px;
    position: absolute;
    right:20%;
    background: white;
 }
 .content .mouth .tongue{
    width: 40px;
    height: 45px;
    border-radius: 50%;
    position: absolute;
    bottom:-20px;
    left:10%;
    transform: rotate(-60deg);
    background: rgb(148, 19, 19);
 }
 .content .emoji-head .cheeks{
    width: 180px;
    position: absolute;
    display: flex;
    justify-content: space-between;
    top: 52%;
    left:50%;
    transform: translateX(-50%);
 }
 .content .emoji-head .cheek-item{
    width: 60px;
    height: 25px;
    border-radius: 50%;
    
 }
 .content .emoji-head .eye-white{
    width:120px;
    position: relative;
    display: flex;
    justify-content: space-between;
    padding-top: 40px;
 }   
 
 .content .emoji-head .eye-white .eye-white-left,.eye-white-right{
    width:50px;
    height:50px;
    border-radius: 50%;
    background: white;
    position: relative;
    overflow: hidden;
 }
 .eye-ball{
    position: absolute;
    border-radius: 50%;
    background: rgb(95, 3, 3);
    width: 22px;
    height: 22px;
 }
 
 
 </style>